<template>
  <div class="home">
    <div class="head">
      <div id="map"></div>

      <div class="inp">
        <input
          type="text"
          v-model="address"
          placeholder="搜索地点"
          @input="getPlace"
        />
      </div>

      <div class="iconfont icon-cuo left" @click="$router.push({name:'Home'})"></div>
      <div class="iconfont icon-duigou right" @click="fn2"></div>
    </div>
    <div class="list">
      <div class="ul"  >
        <md-scroll-view ref="scrollView" 
        :bouncing='false'
        auto-reflow>
          <div class="li" v-for="(i, d) of data" :key="d" @click="fn1($event,i.location)" >
            <p class="adc">{{ i.name }}</p>
            <p class="avc">{{ i.address }}</p>
          </div>
        </md-scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
import { getBdSearch } from "@/apis/client";
import { mapState ,mapGetters ,mapActions,mapMutations} from 'vuex' 
export default {
  name: "Home",
  data() {
    return {
      address: "",
      map: null,
      cite: "广州",
      timer: null,
      data: [],
      list: 5,
      loc:{}
    };
  },
   computed: {

       ...mapState({						
                dataadr: (state)=> state.dataadr,
               
            }),

   	},
  watch: {
    address(nv) {
      this.getPlace();
    },
  },

  mounted() {
    this.initMap(); // 初始化地图
    this.map .clearOverlays();
    window.ScrollViewTrigger0 = () => {
      this.addItems();
    };
  },
  methods: {
      ...mapMutations({												
            change:'changedataadr',
           								
        }),



    fn2(){
      
        this.change(this.address)
        let names = localStorage.getItem("name")
        // console.log(names,'本地存储');
        this.$router.push({ name: `${names}`, query: this.loc}) 
    },
    
    fn1(e,loc){
       console.log(loc,'我是地图的经纬度');
        this.loc=loc
        
      if (e.target.classList.contains('adc')) {
        // console.log(e.target.innerText);
             this.map .clearOverlays();
              this.address=e.target.innerText
             var marker1 = new BMapGL.Marker(new BMapGL.Point(loc.lng, loc.lat));
          this.map.addOverlay(marker1);

           
      }
       if (e.target.classList.contains('avc')) {
           this.map .clearOverlays();
         this.address=e.target.innerText
          var marker1 = new BMapGL.Marker(new BMapGL.Point(loc.lng, loc.lat));
          this.map.addOverlay(marker1);
      }

        
    },
   
    initMap() {
      var map = new BMapGL.Map("map", {
        enableDblclickZoom: false,
        displayOptions: {
          building: false,
        },
      });
      this.map = map;
       this.map .clearOverlays();
      map.centerAndZoom(new BMapGL.Point(113.312796, 23.221398), 16); // 设置地图中心点及缩放级别
      map.enableScrollWheelZoom(true); // 是否允许缩放
      //3d视图
      map.setHeading(64.5);
      map.setTilt(73);
      //点标记
      var marker1 = new BMapGL.Marker(new BMapGL.Point(113.42077, 23.168814));
      map.addOverlay(marker1);

      let pt = new BMapGL.Point(113.42077, 23.168814); // 新建一个地图坐标点的实例
      var myGeo = new BMapGL.Geocoder(); // 新建一个 解码实例

      // 地址的逆解释
      myGeo.getLocation(pt, (res) => {
        // res 就是得到对应的坐标点解释出来的地址信息
        // console.log(res,'我是逆解释');
        this.address = res.address;
        // console.log(this.address);
        // console.log(res, "woshi1");
      });

      //地图单击事件,覆盖物移动,获取经纬度
      map.addEventListener("click", (ev) => {
        // console.log('map ev',ev)    //获取经纬度
        const { lat, lng } = ev.latlng;

        const _temmark = new BMapGL.Marker(new BMapGL.Point(lng, lat));
        map.clearOverlays(); // 清除覆盖物
        map.addOverlay(_temmark);

        let pt = new BMapGL.Point(lng, lat); // 新建一个地图坐标点的实例
        var myGeo = new BMapGL.Geocoder(); // 新建一个 解码实例
        // 地址的逆解释
        myGeo.getLocation(pt, (res) => {
          // res 就是得到对应的坐标点解释出来的地址信息
          // console.log(res.address, "我是地址");
          this.address = res.address;
        });
      });
    },

    getPlace() {
      //节流
      let res;

      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        res = await getBdSearch({ address: this.address, cite: this.cite });
        // console.log(res,'woshi1');

        if (!res.data.result[0]) return;
        this.data = res.data.result;
        // console.log(this.data);
        if (res.data.result[0].location) {

          const loc = res.data.result[0].location;
          console.log(loc,'我是input里的经纬度');
          this.loc=loc

          this.map.centerAndZoom(new BMapGL.Point(loc.lng, loc.lat), 16); // 设置地图中心点及缩放级别
          this.map.enableScrollWheelZoom(true); // 是否允许缩放
          var marker1 = new BMapGL.Marker(new BMapGL.Point(loc.lng, loc.lat));
          this.map.addOverlay(marker1);
        }
      }, 500);

      //获取输入地址
      // const res = await getBdSearch({address:this.address,cite:this.cite})
    },
  },
    beforeRouteEnter(to,from,next){
      // console.log(to,'to进入之前');
      // console.log(from,'from进入之前');
      let {name} = from
  
      localStorage.setItem('name',name)
     
      next()
    }
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  .head {
    height: 930px;
 

    #map {
      height: 816px;
    
    }
    .inp {
      margin-top: 12px;
      width: 100%;
      height: 90px;
      padding: 0 20px;
      box-sizing: border-box;
      input {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        outline: none;
        border: none;
     
        text-indent: 40px;
      }
    }
    .left {
      top: 30px;
      left: 30px;
      position: absolute;
      z-index: 999;
      font-size: 80px;
      color: black;
      padding: 6px;
      color: white;
      background: rgba(0, 0, 0, 0.363);
    }
    .right {
          z-index: 999;
      top: 30px;
      right: 30px;
      position: absolute;
      font-size: 80px;
      color: black;
      padding: 6px;
      color: white;
      background: rgba(0, 0, 0, 0.363);
    }
  }
  .list {
    height: 0;
    flex-grow: 1;
    
    background: white;

    .ul {
      margin-top: 30px;
      padding: 60px;
      font-size: 38px;
      height: 100%;

      box-sizing: border-box;
      .li {
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        padding: 14px 0;
        height: 138px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
         & > p:nth-of-type(1){
           font-size: 40px;
         }
        & > p:nth-of-type(2) {
          color: #808080;
          font-size: 12px;

        }
      }
    }
  }
}
</style>